import html2canvas from "html2canvas"
import jsPDF from "jspdf"

export const downloadPDF = (el, title) => {
  html2canvas(el, {
    allowTaint: true,
    useCORS: true,
    dpi: 120, // 图片清晰度问题
    background: '#FFFFFF', //如果指定的div没有设置背景色会默认成黑色
  }).then(canvas => {
    // 未生成pdf的html页面高度
    let leftHeight = canvas.height
   
    //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
    let a4Width = 595.28
    let a4Height = 841.89
    //一页pdf显示html页面生成的canvas高度;
    let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
    //pdf页面偏移
    let position = 0

    // canvas.toDataURL() 返回一个包含图片展示的 数据URL。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
    // 返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性。
    let pageData = canvas.toDataURL('image/jpeg', 1.0)

    let pdf = new jsPDF('p', 'pt', 'a4') //A4纸，纵向
   
    // let index = 1
    let createCanvas = document.createElement('canvas')
    let height

    pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')

    let pdfName = title || "个人简历"
    function createImpl(canvas) {
      console.log(leftHeight, a4HeightRef)
      if (leftHeight > 0) {
        // index++
        let checkCount = 0
        if (leftHeight > a4HeightRef) {
          let i = position + a4HeightRef
          for (i = position + a4HeightRef; i >= position; i--) {
            let isWrite = true
            for (let j = 0; j < canvas.width; j++) {
              let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
              if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                isWrite = false
                break
              }
            }
            if (isWrite) {
              checkCount++
              if (checkCount >= 10) {
                break
              }
            } else {
              checkCount = 0
            }
          }
          height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
          if (height <= 0) {
            height = a4HeightRef
          }
        } else {
          height = leftHeight
        }

        createCanvas.width = canvas.width
        createCanvas.height = height

        // console.log(index, 'height:', height, 'pos', position)
        console.log('height:', height, 'pos', position)

        // getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
        let ctx = createCanvas.getContext('2d')

        ctx.drawImage(
          canvas,
          0,
          position,
          canvas.width,
          height,
          0,
          0,
          canvas.width,
          height,
        )

        // let pageHeight = Math.round((a4Width / canvas.width) * height)
        // pdf.setPageSize(null, pageHeight)
        if (position != 0) {
          pdf.addPage()
        }
        pdf.addImage(
          createCanvas.toDataURL('image/jpeg', 1.0),
          'JPEG',
          10,
          20,
          a4Width -30,
          (a4Width / createCanvas.width) * height -30,
        )
        leftHeight -= height
        position += height
        if (leftHeight > 0) {
          setTimeout(createImpl, 100, canvas)
        } else {
          pdf.save(pdfName + '.pdf')
        }
      }
    }

    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < a4HeightRef) {
      pdf.addImage(
        pageData,
        'JPEG',
        10,
        20,
        a4Width - 30,
        (a4Width / canvas.width) * leftHeight -30,
      )
      pdf.save(pdfName + '.pdf')
    } else {
      try {
        pdf.deletePage(0)
        setTimeout(createImpl, 100, canvas)
      } catch (err) {
        console.log(err)
      }
    }
  })
}


// 页面水印 小密
// export const previewWater = (str, str2) => {
//   console.log(str)
//   let ctx = document.createElement("canvas")
//   ctx.width = 800
//   ctx.height = 1200
//   ctx.style.display = "block"
//   let cans = ctx.getContext("2d")
//   cans.rotate((-45 * Math.PI) / 180)
//   cans.font = "16px Microsoft YaHei"
//   cans.fillStyle = "rgba(0, 0, 0, 0.3)"
//   cans.textAlign = "left"
//   cans.textBaseline = "Middle"
//   cans.fillText(str, 0, 100)
//   cans.fillText(str2, 0, 120) // 第二行字体
//   cans.save()
//   return ctx.toDataURL()
// }

// 页面水印 大中
export const previewWater2 = (strName, strLink) => {
  // 创建一个画布
  const can = document.createElement('canvas')
  // 设置画布的长宽
  can.width = 500
  can.height = 750

  const cans = can.getContext('2d')
  // 旋转角度 canvas旋转不是以图片旋转，而是以画布左上角为原点旋转
  cans.rotate((-45 * Math.PI) / 180)
  cans.translate(0, 0)

  const txtLen = strName.length
  // 水印如果都短设置为50px字体，长水印则30px字体
  const fontSize = txtLen > 12 ? '30px Simsun' : '40px Simsun'
  cans.font = fontSize
  // 设置填充绘画的颜色、渐变或者模式
  // cans.fillStyle = 'rgba(0, 0, 0, 0.3)'
  cans.fillStyle = 'rgba(0, 0, 0, 1)'
  // 设置文本内容的当前对齐方式
  cans.textAlign = 'center'
  // 设置在绘制文本时使用的当前文本基线
  cans.textBaseline = 'Middle'
  // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  cans.fillText(strName, -txtLen * 12, 400)
  cans.fillText(strLink, -txtLen * 12, 440)
  // save()方法就是保存你在 cans 中设置的各种样式以及属性
  // save()方法相当于将设置的内容隔离出来，不会对外面的任何内容造成影响
  cans.save()
  return can.toDataURL()
}


/**
 * 满屏水印
 * @param {*} strName 
 * @param {*} strLink 
 * @param {*} el 
 * @returns 
 */
export const previewWater = (inputval, strLink, el) => {
  // 创建一个画布
  const canvas = document.createElement('canvas')
  // 设置画布的长宽
  canvas.width = el.clientWidth
  canvas.height = el.clientHeight
  const context = canvas.getContext('2d')
  context.translate(0, 0)
  const fontSize = '30px Simsun'
  context.font = fontSize
  const strarr = [0, 0] // 起始位置：[0, 0]  ==>  左上角
  const value0 = 50 // x间距
  const value1 = 50 // y间距
  const value2 = 24 // 水印大小
  const rotate = -45 // 旋转角度
  for (let i = 0; i < canvas.width; i += (value2 * inputval.length + value0)) {
    for (let j = 0; j < canvas.height; j += (value2 + value1)) {
      context.save()
      context.globalAlpha = 0.3
      context.translate(strarr[0] + i, strarr[1] + j)
      context.rotate((Math.PI / 180) * (rotate * 1))
      context.translate(-strarr[0] - i, -strarr[1] - j)
      context.fillText(inputval, (strarr[0]) + i, (strarr[1]) + j + value2)
      context.restore()
    }
  }
  // save()方法就是保存你在 cans 中设置的各种样式以及属性
  // save()方法相当于将设置的内容隔离出来，不会对外面的任何内容造成影响
  context.save()
  return canvas.toDataURL()
}

/*

let createCanvas = document.createElement('canvas')
createCanvas.width = width
createCanvas.height = height
let ctx = createCanvas.getContext('2d')
ctx.drawImage(
  canvas,
  0,
  position,
  canvas.width,
  height,
  0,
  0,
  canvas.width,
  height,
)

drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分

image	  规定要使用的图像、画布或视频
sx	    可选。开始剪切图片的 x 坐标位置
sy	    可选。开始剪切图片的 y 坐标位置
sw	    可选。被剪切图像的宽度（就是裁剪之前的图片宽度，这里的宽度若小于图片的原宽。则图片多余部分被剪掉；若大于，则会以空白填充）
sh	    可选。被剪切图像的高度（就是裁剪之前的图片高度）
dx	    在画布上放置图像的 x 坐标位置
dy	    在画布上放置图像的 y 坐标位置
dw	    可选。要使用的图像的宽度（就是裁剪之后的图片高度，放大或者缩放）
dh	    可选。要使用的图像的高度（就是裁剪之后的图片高度，放大或者缩放）


*/

